<template>
  <div class="page-layout">
    <el-form :model="formInline" ref="form" label-width="90px" class="form-inline" label-suffix="：">
      <el-row :gutter="10">
        <el-col :lg="6" :xl="6"><el-form-item label="保单号">
            <el-input v-model="formInline.insureNum" placeholder="请输入保单号"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="6"><el-form-item label="订单号">
            <el-input v-model="formInline.orderNum" placeholder="请输入订单号"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="6">
          <el-form-item label="理赔号">
            <el-input v-model="formInline.reportNum" placeholder="请输入理赔号"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="6"><el-form-item label="箱号">
            <el-input v-model="formInline.containerNumber" placeholder="请输入箱号"></el-input> </el-form-item></el-col>
        <!-- <el-col :lg="6" :xl="6"><el-form-item label="运单号">
            <el-input v-model="formInline.tagInvoiceWaybill" placeholder="请输入运单号"></el-input> </el-form-item></el-col> -->
        <el-col :lg="8" :xl="8"><el-form-item label="投保日期">
            <el-date-picker style="width:100%" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker></el-form-item></el-col>
        <el-col :lg="6" :xl="6">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" :disabled="!tableData.length" @click="downloadExcel">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" border :data="tableData" :height="tableHeight" :style="{ width: '100%' }">
      <el-table-column prop="insureNum" label="保单号" width="150"> </el-table-column>
      <el-table-column prop="templateName" label="险种" width="120"></el-table-column>
      <el-table-column prop="reportTime" label="报案时间" width="120">
      </el-table-column>
      <el-table-column prop="containerNumber" label="出险箱号" width="140">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.containerNumber }}
        </template>
      </el-table-column>
      <el-table-column prop="lossFee" label="损失金额（元）" width="140">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.lossFee }}
        </template>
      </el-table-column>
      <el-table-column prop="reportStatus" label="当前节点" width="110">
        <template slot-scope="scope">
          {{ getLabel(ReportStatus, scope.row.reportStatus) }}
        </template>
      </el-table-column>
      <el-table-column prop="sceneName" label="现场联系人" width="110">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.sceneName }}
        </template>
      </el-table-column>

      <el-table-column prop="scenePhone" label="联系方式" width="130">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.scenePhone }}
        </template>
      </el-table-column>
      <el-table-column prop="reportPlace" label="出险地址" width="150">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.reportPlace }}
        </template>
      </el-table-column>
      <el-table-column prop="reportCause" label="出险原因" width="150">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.reportCause }}
        </template>
      </el-table-column>
      <el-table-column prop="explain" label="损失情况说明" width="150">
        <template slot-scope="scope">
          {{ scope.row.frontReportInsure.explain }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="detailClick(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="followingClick(scope.row.orderNum)" type="text" size="small">跟踪</el-button>
          <el-button v-if="scope.row.reportStatus !== '7' && scope.row.reportStatus != '3'
      " @click="changeOrderClick(scope.row)" type="text" size="small">取消报案</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-dialog :visible.sync="showFollowing" width="900px">
      <el-steps style="padding-top: 50px" align-center :active="reportStatus">
        <el-step v-for="(item, index) in stepList" :title="item.label" :description="item.time" :key="index">
        </el-step>
      </el-steps>
    </el-dialog>

    <!-- <el-dialog title="理赔详情" :visible.sync="settlementOfClaimDialog" width="1200PX">
      <el-card class="box-card" shadow="never">
        <el-form label-width="110px">
          <el-row :gutter="10">
            <el-col :span="8"><el-form-item label="开户名称">
                {{ row.frontReportInsureAccount.accountName }}
              </el-form-item></el-col>
            <el-col :span="8"><el-form-item label="开户类型">
                {{
      row.frontReportInsureAccount.accountType == "1"
        ? "身份证"
        : "统一信用代码"
    }}</el-form-item></el-col>
            <el-col :span="8"><el-form-item label="地区">
                {{ row.frontReportInsureAccount.areaName }}</el-form-item></el-col>
            <el-col :span="8"><el-form-item label="地区银行">{{
      row.frontReportInsureAccount.bankName
    }}</el-form-item></el-col>

            <el-col :span="8"><el-form-item label="分支行名称">{{ row.frontReportInsureAccount.bankBranchName }}
              </el-form-item></el-col>

            <el-col :span="8"><el-form-item label="卡号" prop="accountNumber">
                {{ row.frontReportInsureAccount.accountNumber }}</el-form-item></el-col>

            <el-col :span="8"><el-form-item label="联系方式">{{
      row.frontReportInsureAccount.contactPhone
    }}</el-form-item></el-col>

            <el-col :span="8"><el-form-item label="证件号码">{{
      row.frontReportInsureAccount.certificateNumber
    }}</el-form-item></el-col>

            <el-col :span="8"><el-form-item label="货物名称">{{
      row.frontReportInsure.goodsName
    }}</el-form-item></el-col>

            <el-col :span="8"><el-form-item label="出险箱号">
                {{ row.frontReportInsure.containerNumber }}
              </el-form-item>
            </el-col>

            <el-col :span="8"><el-form-item label="损失金额">
                {{ row.frontReportInsure.lossFee }}</el-form-item></el-col>

            <el-col :span="8"><el-form-item label="现场联系人">
                {{ row.frontReportInsure.sceneName }}</el-form-item></el-col>

            <el-col :span="8"><el-form-item label="联系方式">{{
      row.frontReportInsure.scenePhone
    }}</el-form-item></el-col>

            <el-col :span="16"><el-form-item label="出险地址">
                {{ row.frontReportInsure.reportPlace }}</el-form-item></el-col>

            <el-col :span="24"><el-form-item label="出险原因">{{
      row.frontReportInsure.reportCause
                }}</el-form-item></el-col>

            <el-col :span="24"><el-form-item label="损失情况说明">
                {{ row.frontReportInsure.explain }}</el-form-item></el-col>
          </el-row>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="settlementOfClaimDialog = false">确 定</el-button>
      </span>
    </el-dialog> -->
    <view-or-examine ref="viewOrExamine"></view-or-examine>
  </div>
</template>
<script>
import { getLabel } from "@/utils/func";
import { ReportStatus } from "@/utils/options";
import viewOrExamine from "./viewOrExamine.vue";
import moment from "moment";
export default {
  components: { viewOrExamine },
  data() {
    return {
      getLabel,
      ReportStatus,
      settlementOfClaimDialog: false,
      pageSize: 10,
      total: 0,
      pageNum: 1,
      showFollowing: false,
      stepList: [],
      reportStatus: 0,
      reverse: true,
      dialogVisible: false,
      tableHeight: 0,
      currentPage4: 4,
      isShow: false,
      formInline: {
        insureNum: "",
        orderNum: "",
        reportNum: "",
        containerNumber: "",
        // tagInvoiceWaybill: "",
      },
      tableData: [],
      row: {
        frontReportInsureAccount: {},
        frontReportInsure: {},
      },
      date: "",
    };
  },
  methods: {
    detailClick(row) {
      this.$refs.viewOrExamine.dialogFormVisible = true;
      this.$refs.viewOrExamine.title = "查看";
      this.$refs.viewOrExamine.row = row;
      this.$refs.viewOrExamine.followingClick(row.orderNum);
      this.$refs.viewOrExamine.isExamine = false;
    },
    downloadExcel() {
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.date) {
        params.beginTime = moment(this.date[0]).format("YYYY-MM-DD");
        params.endTime = moment(this.date[1]).format("YYYY-MM-DD");
      } else {
        params.beginTime = "";
        params.endTime = "";
      }
      const date = moment().format("YYYY-MM-DD HH:mm:ss");
      const headers = {
        responseType: "blob",
      };
      // 发送请求获取Excel文件流
      this.$post("/warranty/insure/exportClaim", params, headers)
        .then((response) => {
          // 创建一个blob URL来下载文件
          const url = window.URL.createObjectURL(new Blob([response]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", `出险保单信息${date}.xls`); // 设置文件名
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error("下载失败", error);
          // 处理下载失败的情况
        });
    },
    changeOrderClick(item) {
      this.$toConfirm("是否取消报案", "warning", "提示")
        .then(() => {
          this.$post("/warranty/insure/cancelreport", {
            orderNum: item.orderNum,
          }).then((res) => {
            if (res.code == 200) {
              this.$toast({
                message: "取消成功",
                duration: 800,
              });
            }
          });
        })
        .catch(() => {
          //
        });
    },
    followingClick(orderNum) {
      this.showFollowing = true;
      this.$get("/warranty/insure/reportProcess", {
        orderNum,
      }).then((res) => {
        this.stepList = [];
        res.data.forEach((item) => {
          this.stepList.push({
            label: getLabel(ReportStatus, item.reportStatus),
            time: item.createTime,
          });
        });
        this.reportStatus = res.data.length;
      });
    },
    onSubmit() {
      this.pageNum = 1;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTableData();
    },
    setTableHeight() {
      this.$nextTick(() => {
        const bodyHeight = window.innerHeight;
        const queryHeight =
          this.$refs.form &&
          this.$refs.form.$el &&
          this.$refs.form.$el.offsetHeight;
        this.tableHeight = bodyHeight - queryHeight - 210 + "px";
      });
    },
    getTableData() {
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.date) {
        params.beginTime = moment(this.date[0]).format("YYYY-MM-DD");
        params.endTime = moment(this.date[1]).format("YYYY-MM-DD");
      } else {
        params.beginTime = "";
        params.endTime = "";
      }
      this.$get("/warranty/insure/claim", params).then((res) => {
        if (res) {
          this.tableData = res.rows;
          this.total = res.total;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
  },
  mounted() {
    this.setTableHeight();
    window.addEventListener("resize", this.setTableHeight);
    this.getTableData();
  },
};
</script>
<style scoped lang="less">
.time {
  /deep/.el-form-item__label {
    line-height: 20px;
  }
}
</style>